<template>
	<div class="warp">
		<div class="form-table">
			<el-table :data="value" height="360px" v-show="value.length">
				<el-table-column align="center" fixed label="序号" type="index" width="50"></el-table-column>
				<slot></slot>
				<el-table-column align="center" fixed="right" label="操作" v-if="!disabled" width="100">
					<template slot-scope="{row}">
						<i @click="deleteTable(row)" class="delete el-icon-remove-outline"></i>
					</template>
				</el-table-column>
			</el-table>
			<div class="form-table-btn" v-if="value.length&&!disabled">
				<el-button @click="openDialog" type="primary">添加</el-button>
			</div>

			<Empty v-show="!value.length">
				<p>
					未关联{{title}}
					<span v-if="!disabled">，</span>
					<a @click="openDialog" href="javascript:void(0);" v-if="!disabled">点击添加</a>
				</p>
			</Empty>
		</div>

		<el-dialog :title="`选择${title}`" :visible.sync="show" :width="dialogWidth" @opened="opened">
			<div class="table-warp">
				<ZjyTable
					:filterData="filterData"
					:getTableData="fetchData"
					@selection-change="handleSelectionChange"
					class="project-table"
					height="500px"
					ref="table"
				>
					<slot name="dialogTable"></slot>
				</ZjyTable>
			</div>
			<span class="dialog-footer" slot="footer">
				<el-button @click="show = false">取 消</el-button>
				<el-button :disabled="!selectList.length" @click="reportSubmit" type="primary">确定({{selectList.length}})</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
import ZjyTable from '@/components/common/Table/index.vue'
import Empty from '@components/common/Empty/index.vue'

export default {
	components: {
		Empty,
		ZjyTable
	},
	props: {
		/**
		 * v-model的值,初始选择项目或者已选择项
		 */
		value: {
			type: Array,
			default() {
				return []
			}
		},

		/**
		 * 要选择项的名称
		 */
		title: {
			type: String,
			default: '列表项'
		},
		/**
		 * 获取弹出框表格数据的方法
		 */
		getData: {
			type: Function,
			required: true
		},
		/**
		 * 弹框的宽度
		 */
		dialogWidth: {
			type: String,
			default: '600px'
		},
		/**
		 * 是否禁用
		 */
		disabled: {
			type: Boolean,
			default: false
		}
	},
	watch: {
		value(val) {
			this.selectList = val
		}
	},
	data() {
		return {
			selectList: [],
			show: false
		}
	},
	methods: {
		handleSelectionChange(val) {
			console.log('val', val)
			this.selectList = val
		},
		fetchData(page, needCache) {
			return this.getData(page, {
				loading: {
					target: this.$refs.table
				},
				cacheTime: needCache ? 1000 : 0
			})
		},
		openDialog() {
			this.selectList = this.value
			this.show = true
		},
		filterData(data) {
			const addList = []
			// 没有则添加
			this.value.forEach(el => {
				if (data.findIndex(item => item.id === el.id) === -1) {
					addList.push(el)
				}
			})
			console.log(addList)
			// 保存所有表格数据
			this.allData = addList.concat(data)
			return this.allData
		},
		opened() {
			// 拿到table实例
			const table = this.$refs.table.GetTable()
			this.allData.forEach(el => {
				const select = this.value.findIndex(item => item.id === el.id) !== -1
				console.log(select)
				table.toggleRowSelection(el, select)
			})
		},
		reportSubmit() {
			this.$emit('input', this.selectList)
			this.show = false
		},
		deleteTable(row) {
			this.$emit(
				'input',
				this.value.filter(item => item.id !== row.id)
			)
		}
	}
}
</script>
<style lang="scss" scoped>
.warp {
	.form-table {
		height: 400px;
		border: 1px solid $color-border-regular;
		position: relative;
		.delete {
			cursor: pointer;
			color: $color-err;
			font-size: 14px;
		}
		.form-table-btn {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			height: 40px;
			text-align: center;
			.el-button {
				margin-top: 4px;
			}
		}
	}
}
</style>
